<script setup>
	import { computed, ref } from 'vue'
	import { useSimpleQueryStore } from '@/views/plugin/dashboard/store/simpleQuery'

	// 转换为小写驼峰格式的函数
	const toCamelCase = (str) => {
		// 如果字符串中包含括号，分离括号内外的内容
		const matches = str.match(/(.*?)\s*\((.*?)\)\s*$/)
		if (matches) {
			// 处理括号外的部分为驼峰格式
			const mainPart = matches[1].toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase())
			// 保持括号内的内容不变
			return `${mainPart} (${matches[2]})`
		}
		// 如果没有括号，按原来的方式处理
		return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase())
	}

	const store = useSimpleQueryStore()

	// 列选择面板可见状态
	const columnSelectorVisible = ref(false)

	// 系统字段显示状态
	const showSystemFields = ref(true)

	// 系统字段列表
	const systemFields = ['DELETE_FLAG', 'CREATE_TIME', 'CREATE_USER', 'UPDATE_TIME', 'UPDATE_USER']

	// 使用计算属性来处理选中的列
	const selectedColumns = computed({
		get: () => store.formData.itemConfig.selectedColumns,
		set: (value) => store.setSelectedColumns(value)
	})

	// 切换系统字段显示状态
	const toggleSystemFields = () => {
		showSystemFields.value = !showSystemFields.value
		if (!showSystemFields.value) {
			// 取消选中系统字段
			selectedColumns.value = store.formData.itemConfig.selectedColumns.filter((col) => !systemFields.includes(col))
		} else {
			// 选中所有系统字段
			const systemFieldsToAdd = store.formData.itemConfig.columns
				.filter((col) => systemFields.includes(col.key))
				.map((col) => col.key)
			selectedColumns.value = [...store.formData.itemConfig.selectedColumns, ...systemFieldsToAdd]
		}
	}

	// 重置列选择
	const resetColumns = () => {
		selectedColumns.value = store.formData.itemConfig.columns.map((col) => col.key)
		showSystemFields.value = true
	}

	// 切换列选择面板
	const toggleColumnSelector = () => {
		columnSelectorVisible.value = !columnSelectorVisible.value
	}

	defineExpose({
		toggleColumnSelector
	})
</script>

<template>
	<a-tooltip title="显示字段">
		<a-popover
			v-model:open="columnSelectorVisible"
			trigger="click"
			placement="rightTop"
			overlay-class-name="column-selector-popover"
		>
			<template #content>
				<div class="column-selector-panel">
					<div class="panel-header flex justify-between items-center mb-4">
						<span>显示字段</span>
						<a-switch
							v-model:checked="store.formData.itemConfig.enableCamelCase"
							class="ml-1"
							:checkedValue="true"
							:unCheckedValue="false"
							checked-children="驼峰"
							un-checked-children="原始"
						/>
						<div class="flex gap-2">
							<a-button type="link" size="small" @click="toggleSystemFields">
								{{ showSystemFields ? '隐藏系统字段' : '显示系统字段' }}
							</a-button>
							<a-button type="link" size="small" @click="resetColumns">重置</a-button>
						</div>
					</div>
					<a-empty v-if="selectedColumns?.length === 0" description="暂无显示列" />
					<a-checkbox-group v-model:value="selectedColumns" class="column-selector">
						<div v-for="col in store.formData.itemConfig.columns" :key="col.key">
							<a-checkbox :value="col.key" v-show="showSystemFields || !systemFields.includes(col.key)">
								{{ store.formData.itemConfig.enableCamelCase ? toCamelCase(col.title) : col.title }}
							</a-checkbox>
						</div>
					</a-checkbox-group>
				</div>
			</template>
			<a-button
				type="link"
				:class="{ 'text-primary bg-primary-1 shadow-sm': columnSelectorVisible }"
				@click="toggleColumnSelector"
			>
				<template #icon><table-outlined /></template>
			</a-button>
		</a-popover>
	</a-tooltip>
</template>

<style scoped>
	.column-selector-panel {
		width: 350px;
		flex-shrink: 0;
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 2px;
		padding: 16px;
		max-height: calc(100vh - 200px);
		overflow-y: auto;
	}

	.panel-header {
		font-weight: 500;
		margin-bottom: 16px;
	}

	.column-selector {
		display: flex;
		flex-direction: column;
		gap: 8px;
		overflow-y: auto;
		padding-right: 8px;
		scrollbar-width: thin;
		position: relative;
	}

	.column-selector::-webkit-scrollbar {
		width: 3px;
	}

	.column-selector::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 2px;
	}

	.column-selector::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 2px;
	}

	.column-selector::-webkit-scrollbar-thumb:hover {
		background: #999;
	}

	.text-primary {
		color: #1890ff;
	}

	.bg-primary-1 {
		background-color: rgba(24, 144, 255, 0.1);
	}
</style>
